﻿@model HanGu.Entity.MemberInfo
@{
    ViewBag.Title = "上传头像——我的汉古";
    Layout = "~/Views/Shared/Main.cshtml";
    TempData["sidecalss"] = "EveryDayWisdom";
}
@section Header
{
    <style>
        .contentLeft
        {
            width: 100%;
        }
        #partContent
        {
            width: 100%;
        }
        .movieContain
        {
            width: 100%;
            margin-top: 5px;
        }
    </style>
    <link href="/Content/ImgSelect/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />    
    <script src="/Content/ImgSelect/scripts/jquery.imgareaselect.min.js" type="text/javascript"></script>
    <link href="/Content/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
    <script src="/Content/uploadify/scripts/swfobject.js" type="text/javascript"></script>
    <script src="/Content/uploadify/scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
   @* <link href="/Content/Jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script src="/Content/Jcrop/jquery.color.js" type="text/javascript"></script>
    <script src="/Content/Jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>*@
}
@section Banner
{
    @Html.Partial("Banner")
}
@section Content{
    <div class="contentLeft">
        <table cellpadding="0" cellspacing="0" id="partContent" style="height: 100%;">
            <tr>
                <td>
                    <div class="ContentTitle">
                        <div class="ContentTitleLeft">
                            <img src="/Content/images/vipmyhanguTitle.gif" width="145" height="26" alt=""></div>
                        <div class="ContentTitleRight">
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="content">
                    <div class="contentLeft" style="height: 550px; width: 150px; background-color: #ccc">
                        @Html.Partial("vipLeftMenu")
                    </div>
                    <div class="contentLeft MyInfo" style="height: 100%; width: 500px; margin-left: 20px;">
                        <form action="/vip/UploadPic" id="UploadPicForm">
                        <input type="hidden" id="x1" />
                        <input type="hidden" id="y1" />
                        <input type="hidden" id="x2" />
                        <input type="hidden" id="y2" />
                        <input type="hidden" id="width" />
                        <input type="hidden" id="height" />
                        <input type="hidden" id="sourcepath" />
                        <input type="hidden" id="zoom" />
                        <div style="border: 4px solid #ccc;">
                            <img id="sourcePic" src="/Upload/MemberInfo/20121020/F985832A1650166DE6DDE5D8642788D8_B.jpg" />
                        </div>
                        <div>
                            <div id="fileQueue">
                            </div>
                            <input type="file" name="uploadify" id="uploadify" />
                        </div>
                        <div class="login_bar">
                            <div style="width: 60px; float: left">
                                <input class="sub" type="button" value="保存" style="width: 50px" onclick="sumbitForm()" /></div>
                        </div>
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
}
@section Side{
    @Html.Partial("Side")
}
<script>
    function ReSetImg(img) {
        if (img.get(0).width > 500) {
            img.attr("width", 500);
            $("#zoom").val(img.get(0).width/500);
        }
    }
    $(function () {
        var img = $("#sourcePic");
        ReSetImg(img);
        img.imgAreaSelect({
            /*maxWidth: 120,
            maxHeight: 120,*/
            aspectRatio: '1:1',
            handles: true,
            onSelectEnd: preview

        });

        $("#uploadify").uploadify({
            'uploader': '/Content/uploadify/scripts/uploadify.swf',
            'script': '/DownLoad/SaveFile',
            'cancelImg': '/Content/uploadify/cancel.png',
            'folder': 'Temp',
            'queueID': 'fileQueue',
            'auto': true,
            'multi': false,
//            'sizeLimit': 200 * 1024,
            'fileExt': "*.jpg;*.jpeg;*.gif;*.png;",
            'fileDesc': "*.jpg;*.jpeg;*.gif;*.png;",
            'scriptData': { 'ClassType': 'Temp\\Vip' },
            'onComplete': function (event, queueId, fileObj, response, data) {
                //debugger;
                var json = eval("(" + response + ")");
                img.attr("src", json.forwardUrl);
                $("#sourcepath").val(json.forwardUrl);
                ReSetImg(img);

            }

        });

    });

    function preview(img, selection) {
        if (!selection.width || !selection.height)
            return;
        $('#vipPic img').attr("src", $(img).attr("src"));
        var scaleX = 120 / selection.width;
        var scaleY = 120 / selection.height;

        $('#vipPic img').css({
            width: Math.round(scaleX * $(img).attr("width")),
            height: Math.round(scaleY * $(img).attr("height")),
            marginLeft: -Math.round(scaleX * selection.x1),
            marginTop: -Math.round(scaleY * selection.y1)
        });
        debugger;
        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#width').val(selection.width);
        $('#height').val(selection.height);
    }

    function sumbitForm() {
        $.ajax({
            type: "POST",
            url: "/vip/UploadPic",
            data: "path=" + $("#sourcepath").val() + "&x1=" + $("#x1").val() + "&x2=" + $("#x2").val() + "&y1=" + $("#y1").val() + "&y2=" + $("#y2").val() + "&width=" + $("#width").val() + "&height=" + $("#height").val(),
            success: function (data) {
                var json = eval("(" + data + ")");
                if (json.statusCode == 200) {
                    $('#vipPic img').attr("src", json.forwardUrl);
                    alert(json.message);
                }
                else {
                    alert(json.message);
                }
            }
        });
    }

</script>
